.my{
    width: 100%;
    height: 100%;
            // 头部卡片
            .my_card {
                background-color: #FF4642;
                padding: 0 32rpx;
                padding-bottom: 40rpx;

                .logo {
                    padding-top: 30rpx;
                    height: 48rpx;

                    img {
                        height: 48rpx;
                    }
                }
            }
			.info{
				position: relative;
				padding: 76rpx 0 80rpx;
				.info_name {
					display: inline-block;
					margin-left: 24rpx;
					padding-top: 10rpx;
					padding-bottom: 24rpx;
					font-size: 36rpx;
					color: #fff;
					line-height: 1em;
				}
				.info_right {
					background-color: #fff;
					border-radius: 20rpx;
					height: 40rpx;
					width: 128rpx;
					display: inline-block;
					margin-left: 24rpx;
					.info_text{
						color: #FF5445;
						font-size: 24rpx;
						padding: 4rpx 12rpx 10rpx 18rpx;
					}
				}
				span{
					display: block;
					margin-left: 134rpx;
					height: 24rpx;
					opacity: 0.6;
					font-size: 12px;
					font-family: PingFangSC, PingFangSC-Regular;
					font-weight: 400;
					color: #ffffff;
					line-height: 12px;
				}
				.info_img{
					float: left;
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
				}
				&:after {
				    content: "";
				    position: absolute;
				    right: 2rpx;
				    top: 19%;
				    transform: translateY(100%);
				    background-image: url("/static/img/arrow_right.png");
				    background-size: cover;
				    width: 48rpx;
				    height: 48rpx;
					}
			}
            // 菜单
            .menu {
                margin-bottom: 24rpx;
                padding: 0 32rpx;

                .menu_box {
                    margin-top: -64rpx;
                    border-radius: 16rpx;
                    background-color: #fff;
                }

                .menu_top {
                    display: flex;
                    justify-content: space-between;
					align-items: center;
                    padding: 24rpx;
                    position: relative;

                    .left{
						p {
						    background: linear-gradient(to right, #FF2D1B, #FF977B);
						    -webkit-background-clip: text;
						    color: transparent;
						    font-weight: bolder;
						    font-size: 36rpx;
						    padding-right: 20rpx;
						    line-height: 1em;
						    white-space: nowrap;
						    transform: skewX(-10deg);
						}		
					}

					.right{
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						span {
							width: calc(100% - 48rpx);
						    text-overflow: ellipsis;
						    // overflow: hidden;
						    white-space: nowrap;
						    font-size: 24rpx;
						    color: #333;
						    line-height: 1em;
						}
						img{
							width: 48rpx;
							height: 48rpx;
						}
						&:after {
						    content: "";
						    position: absolute;
						    right: 32rpx;
						    top: 50%;
						    transform: translateY(-50%);
						    background-image: url("/static/img/arrow_right.png");
						    background-size: cover;
						    width: 48rpx;
						    height: 48rpx;
							}
					}
                }

                .menu_bottom {
                    position: relative;
                    display: flex;
                    padding: 32rpx 0;

                    &:before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        height: 1px;
                        transform: scaleY(0.8);
                        background-color: #eee;
                    }

                    .menu_part {
                        flex: 1;
                        text-align: center;

                        img {
							height: 64rpx;
                            width: 64rpx;
                        }

                        p {
                            padding-top: 16rpx;
                            font-size: 24rpx;
                            color: #333;
                            line-height: 1em;
                        }
                    }
                }
            }
            // 赚积分
            .integral {
                padding: 0 32rpx;
                margin-bottom: 24rpx;

                .integral_box {
                    padding: 32rpx;
                    background-image: url('/static/img/box_bg.png');
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    border-radius: 16rpx;
                    display: flex;
                    justify-content: space-between;

                    .text {
                        .num {
                            font-weight: 600;
                            font-size: 48rpx;
                            line-height: 1em;
                            color: transparent;
                            background: linear-gradient(to bottom, #FFFFFF, #FFD6CB);
                            -webkit-background-clip: text;
                        }

                        .words {
                            padding-top: 18rpx;
                            line-height: 1em;
                            font-size: 28rpx;
                            color: #fff;
                        }
                    }

                    .button {
                        width: 180rpx;
                        height: 80rpx;
                        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 214, 203, 1) 100%);
                        border-radius: 16rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        span {
                            font-weight: 600;
                            font-size: 28rpx;
                            color: #FF2D1B;
                            line-height: 1em;
                            padding: 48rpx 24rpx;
                        }
                    }
                }
            }
            // 底部单元格
            .cell_group {
                padding: 0 32rpx;
                margin-bottom: 40rpx;

                .cell_group_box {
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 4rpx 8rpx 24rpx 0px rgba(0, 0, 0, 0.04);
                    border-radius: 12rpx;

                    .cell {
                        padding: 32rpx;
                        display: flex;
                        justify-content: flex-start;
                        position: relative;

                        &:after {
                            content: "";
                            position: absolute;
                            right: 32rpx;
                            top: 50%;
                            transform: translateY(-50%);
                            background-image: url("/static/img/arrow_right.png");
                            background-size: cover;
                            width: 48rpx;
                            height: 48rpx;
                        }

                        img {
							width: 48rpx;
                            height: 48rpx;
                        }

                        p {
                            padding-left: 16rpx;
                            font-weight: 600;
                            font-size: 28rpx;
                            color: rgba(51, 51, 51, 1);
                            line-height: 48rpx;
                        }
                    }

                    .quit{
                        text-align: center;
                        line-height: 100rpx;
                        font-size: 28rpx;
                        color: #999;
                    }
                }
            }
}